<template>
	<div class="competitions">
		<h2>比赛信息管理</h2>
		<el-button
			class="add-btn"
			icon="el-icon-circle-plus-outline"
			type="primary"
			size="small"
			@click="onclickCreateComp"
		>
			添加比赛
		</el-button>
		<div class="table-container">
			<el-table
				ref="table"
				stripe
				row-key="id"
				:data="competitions.filter(item => !searchText || item.name.indexOf(searchText)>-1)"
			>
				<el-table-column
					label="ID"
					width="100"
					prop="id"
					align="center"
				/>
				<el-table-column
					align="center"
					prop="name"
				>
					<template
						slot="header"
						slot-scope="scope"
					>
						<el-input
							:data-scope="scope"
							size="mini"
							placeholder="输入比赛名进行搜索"
							v-model="searchText"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="比赛分类"
					align="center"
					:filters="compFilter"
					filter-placement="bottom-end"
					:filter-multiple="false"
					:filter-method="(value, comp) => comp.competitionType.id === value"
					prop="competitionType.name"
				/>
				<el-table-column
					label="比赛级别"
					align="center"
					:filters="levelFilter"
					filter-placement="bottom-end"
					:filter-multiple="false"
					:filter-method="(value, comp) => comp.level === value"
					prop="levelLabel"
				/>
				<el-table-column
					label="比赛介绍"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							size="mini"
							@click="introMsg=scope.row.intro"
						>
							点击查看比赛介绍
						</el-button>
					</template>
				</el-table-column>
				<el-table-column
					label="热门竞赛"
					align="center"
				>
					<template slot-scope="scope">
						<el-checkbox
							:checked="scope.row.selectedSeasonHot"
							@change="updateComp($event,scope.row)"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							size="mini"
							@click="competition=scope.row"
						>
							编辑
						</el-button>
						<el-button
							size="mini"
							type="danger"
							@click="onclickDelCompetition(scope.row.id)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<IntroCard
			v-if="introMsg"
			title="比赛介绍"
			:html="introMsg"
			@close="introMsg=''"
		/>
		<EditModel
			v-if="competition"
			:competition="competition"
			@close="competition=null"
			@finish="loadCompetitions"
		/>
	</div>
</template>

<script>
import { putComp, delCompetition, postCompetition } from '@/api/competition'
import { PROJECT_TYPE } from '@/constants/staticData'
import EditModel from './components/EditModel'
export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Competition',
    },
  },
  components: {
    EditModel
  },
  data() {
    return {
      competitions: [],
      searchText: '', // 搜索内容
      competition: null, // 编辑的比赛
      introMsg: '' // 简介
    }
  },
  computed: {
    /**
		 * 比赛分类筛选
		 */
    compFilter() {
      return PROJECT_TYPE.map(item => {
        return {
          text: item.label,
          value: item.value
        }
      })
    },
    /**
		 * 比赛级别筛选
		 */
    levelFilter() {
      return [
        { text: '校级', value: 1 },
        { text: '市级', value: 2 },
        { text: '省级', value: 3 },
        { text: '非保研国级', value: 4 },
        { text: '保研国级', value: 5 },
      ]
    }
  },
  created() {
    this.loadCompetitions()
  },
  methods: {
    /**
     * 获取比赛信息
     */
    async loadCompetitions() {
      this.$loading()
      try {
        this.competitions = await this.$rootApp.getComps(true)

        /* 获奖等级转换 */
        this.competitions = this.competitions.map(item => {
          return {
            ...item,
            levelLabel: this.levelFilter.find(level => level.value === item.level).text
          }
        })

        /* 关闭编辑比赛弹窗 */
        this.competition = null
        console.log(this.competitions[ 0 ])
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 更新比赛信息
		 */
    updateComp(val, comp) {
      putComp({
        id: comp.id,
        selectedSeasonHot: Number(val)
      })
      console.log(val, comp)
    },
    /**
		 * 点击添加比赛
		 */
    async onclickCreateComp() {
      this.$loading()
      try {
        const res = await postCompetition({
          name: '新比赛',
          level: 1,
          intro: '',
          articleUrl: '',
          competitionDate: '',
          competitionCycle: '',
          selectedSeasonHot: 1,
          typeId: 1
        })

        this.$success('添加比赛信息成功')
        await this.loadCompetitions()

        /* res.data是新建的比赛id，重新加载比赛后打开该比赛修改弹窗 */
        this.competition = this.competitions.find(item => item.id === res.data)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 点击删除比赛
		 */
    onclickDelCompetition(id) {
      this.$confirm('确认删除该竞赛？', () => {
        this.$confirm('确认删除该竞赛？', async() => {
          this.$loading()
          try {
            await delCompetition(id)
            this.$success('删除成功')
            this.loadCompetitions()
          } catch (err) {
            console.log(err)
          }
          this.$hideLoading()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.competitions {
  position: relative;
  padding: 20px;
  font-size: $sSmall;

  h2 {
    margin-bottom: 10px;
    color: $blue;
  }

  .add-btn {
    position: absolute;
    top: 20px;
    right: 10px;
  }
}
</style>
